<template>
  <div class="flex">
    <!-- 搜索 -->
    <div class="w-a mr">
      <el-input v-model="query.name" clearable :placeholder="placeholder" class="filter-item" />
    </div>
    <slot />
    <el-button class="filter-item" type="success" @click="onSearch">
      <el-icon :size="20" class="mr-1">
        <IconIcBaselineSearch />
      </el-icon>搜索
    </el-button>
    <el-button class="filter-item" type="warning" @click="onReset">
      <el-icon :size="18" class="mr-1">
        <IconSystemReset />
      </el-icon>重置
    </el-button>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    placeholder: String
  },
  emits: ['update:name'],
  setup(props, { emit }) {
    const query = reactive({
      name: props.name
    })


    const onSearch = () => {
      emit('update:name', query.name)
      emit('query')
    }

    const onReset = () => {
      query.name = ''
      emit('update:name', query.name)
      emit('query')
    }

    return { query, onSearch, onReset }
  }
}
</script>